let fill = document.querySelector('.fill')
let empty = document.querySelectorAll('.empty')

console.log();

fill.addEventListener('dragstart', dragStart)
fill.addEventListener('dragend', dragEnd)

empty.forEach(item => {
  item.addEventListener('dragover', dragOver)
  item.addEventListener('dragenter', dragEnter)
  item.addEventListener('dragleave', dragLeave)
  item.addEventListener('drop', dragDrop, false)
})

// 拖拽到一个有效的放置目标上
function dragOver(e) {
  e.preventDefault()
}

// 被拖拽元素进入当前元素
function dragEnter(e) {
  e.preventDefault()
  this.classList.add('enter')
}

// 被拖拽释放到一个有效的释放目标位置时
function dragDrop(e) {
  e.preventDefault()
  e.stopPropagation()
  this.className = 'empty'
  this.append(fill)
}

// 被拖拽元素离开当前元素
function dragLeave() {
  this.classList.remove('enter')
}


// 拖拽开始
function dragStart(e) {
  this.className += ' hold'
  setTimeout(() => this.className = 'invisible', 0)
}

// 拖拽结束
function dragEnd() {
  this.className = 'fill'
}